@charset "utf-8";
//function
@mixin px2rem($property,$px-values,$baseline-px:75px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}
@mixin font-dpr($font-size){
  @include px2rem(font-size,$font-size * 2);
}
/**
.container {
  @include horizontal-center;
}
**/
@mixin horizontal-center {
  margin-left: auto;
  margin-right: auto;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}
@mixin border-1px($color) {
  position: relative;
  &:after{
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 1px solid $color;
    content: ' ';
  }
}

$black: #27313e;
$red: #ff4249;
.wrapper_top{
  @include px2rem(padding-top,90px);
}
.user_box{
  position: relative;
  @include px2rem(padding-left,30px);
  @include px2rem(padding-right,30px);
  @include px2rem(margin-top,40px);
}
.user_img{
  position: absolute;
  @include px2rem(top,0px);
  @include px2rem(margin-right,30px);
  @include px2rem(width,100px);
  @include px2rem(height,100px);
  border-radius: 50%;
  overflow: hidden;
}
.user_img img{
  //width:100%;
}
.user_name{
  @include px2rem(font-size,36px);
  color: $black;
}
.user_name2{
  @include px2rem(font-size,36px);
  color: #ffffff;
}
.user_info{
  @include px2rem(padding-left,130px);
  @include px2rem(padding-top,8px);
  @include px2rem(font-size,26px);
  color: #b3b3b3;
}
.user_id{
  @include px2rem(margin-top,24px);
}
.user_id2{
  @include px2rem(margin-top,24px);
  @include px2rem(font-size,28px);
  font-weight:300;
  color:rgba(255,255,255,1);
}
.goodli{
  @include px2rem(width,330px);
  @include px2rem(padding-top,34px);
  @include px2rem(padding-bottom,38px);
  @include px2rem(padding-right,30px);
  @include px2rem(padding-left,30px);
  @include px2rem(margin-top,25px);
  @include px2rem(border-radius,12px);
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 20px 0px rgba(238,238,238,1);
}
.goodTitle{
  @include px2rem(font-size,26px);
  font-weight:400;
  color:rgba(12,12,12,1);
  @include px2rem(margin-top,32px);
  line-height: 1.6;
}
.goodImg{
  @include px2rem(width,126px);
  margin: 0 auto;
}
.operationBox{
  position: relative;
  @include px2rem(height,54px);
  @include px2rem(line-height,54px);
  @include px2rem(margin-top,12px);
}
.huaPrice{
  @include px2rem(font-size,26px);
  font-weight:400;
  color: rgba(151, 151, 151, 1);
  text-decoration: line-through;
}
.exchangeBtn{
  position: absolute;
  top: 0;
  right: 0;
  @include px2rem(width,150px);
  @include px2rem(height,54px);
  @include px2rem(line-height,54px);
  background:linear-gradient(142deg,rgba(250,128,126,1) 0%,rgba(243,73,72,1) 100%);
  @include px2rem(border-radius,25px);
  color: #fff;
  @include px2rem(font-size,24px);
  text-align: center;
}
.form {
  position: relative;
  top: 0;
  padding: 0 0.45333rem;
  background-color: #fff;
}

.form .form-item {
  position: relative;
  height: 2.2rem;
  /*line-height: 102px;*/
  border-bottom: solid #dddddd .5px;
}

.form .form-item .form-title {
  position: absolute;
  top: 0.8rem;
  left: 0;
  color: #666666;
  font-size: 0.34667rem;
}
.form .form-item .form-input {
  position: absolute;
  top: 1.43333rem;
  left: 0px;
  width: 100%;
  @include px2rem(height,45px);
  transition: font-size 0.1s ease-in;
  @include px2rem(line-height,45px);
  padding: 0;
  font-size: .5rem;
}
.form .form-item .form-code-button {
  position: absolute;
  top: 1.73333rem;
  right: 0;
  color: #ec452c;
  padding: 0;
  font-weight: 400;
  border-color: transparent;
  background: none;
  font-size: .4rem;
}
.exchangeBtnBigTx{
  @include px2rem(font-size,35px);
}
.assetsBox{
  position: relative;
  @include px2rem(width,750px);
  @include px2rem(height,300px);
  margin: 0 auto;
  @include px2rem(padding-top,88px);
  @include px2rem(padding-left,65px);
  @include px2rem(margin-bottom,40px);
  background: url(/v1/images/centerBg.png) no-repeat;
  background-size: cover;
}
.assetsBox2{
  @include px2rem(width,630px);
  margin: 0 auto;
  @include px2rem(margin-top,50px);
}
.halfAssetsBox{
  width: 50%;
  float: left;
}
.halfAssetsTitle{
  @include px2rem(font-size,26px);
  font-weight:300;
  color:rgba(255,255,255,1);
  @include px2rem(margin-bottom,15px);
  @include px2rem(padding-left,10px);
}
.halfAssetsNum{
  position: relative;
  @include px2rem(font-size,56px);
  font-weight:bold;
  color:rgba(255,255,255,1);
}
.mywithdrawBtn{
  display: inline-block;
  @include px2rem(top,8px);
  @include px2rem(width,84px);
  @include px2rem(height,40px);
  @include px2rem(line-height,40px);
  text-align: center;
  background:rgba(255,255,255,0.23);
  @include px2rem(border-radius,24px);
  @include px2rem(font-size,28px);
  font-weight:400;
  color:rgba(255,255,255,1);
}
.mySignBox{
  position: relative;
  @include px2rem(width,695px);
  margin: 0 auto;
  @include px2rem(padding-top,38px);
  //@include px2rem(padding-left,26px);
  @include px2rem(padding-bottom,60px);
  @include px2rem(margin-bottom,40px);
  @include px2rem(margin-top,20px);
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 30px 0px rgba(201,206,211,0.3);
  @include px2rem(border-radius,24px);
}
.signCardList{
  @include px2rem(margin-top,14px);
}
.signFinalCard{
  float: left;
  text-align: center;
}
.signCard{
  float: left;
  //@include px2rem(width,82px);
  @include px2rem(margin-right,8px);
  text-align: center;
  position: relative;
}
.goldTx{
  position: absolute;
  @include px2rem(top,90px);
  left: 0;
  @include px2rem(width,82px);
  @include px2rem(font-size,26px);
  text-align: center;
  color: RGBA(255, 234, 232, 1.00);
}
.signCardImg{
  @include px2rem(width,82px);
  @include px2rem(height,100px);
  @include px2rem(margin-top,38px);
}
.fbCardImg{
  @include px2rem(width,92px);
  @include px2rem(height,138px);
}
.signCardList{
  //display: flex;
  //flex-direction: row;
  //justify-content: flex-start;
  //align-items: baseline;
  @include px2rem(padding-left,28px);
}
.signCardTx{
  @include px2rem(font-size,22px);
  font-weight:400;
  color:rgba(51,51,51,0.33);
}
.unsignCardTx{
  @include px2rem(font-size,22px);
  font-weight:400;
  color:rgba(51,51,51,1);
}
.signRed{
  color: rgba(243, 73, 72, 1);
}
.mySignName{
  @include px2rem(font-size,34px);
  font-weight:500;
  color:rgba(0,0,0,1);
  @include px2rem(padding-left,26px);
  @include px2rem(padding-right,26px);
}

.signmoreInfo{
  display: inline-block;
  @include px2rem(width,32px);
}
.signcard{
  float: right;
  color: rgba(155, 155, 155, 1);
  @include px2rem(font-size,26px);
}
.red_wrapper{
  position: relative;
}
.red_wrapper:after{
  content: '';
  @include px2rem(width,750px);
  @include px2rem(height,552px);
  position: absolute;
  background: url(/v1/images/myBG.png) no-repeat;
  background-size: 100%;
  left: 0;
  @include px2rem(top,0px);
  z-index: -1;
}
.withdraw_btn{
  position: absolute;
  @include px2rem(top,110px);
  @include px2rem(right,50px);
  @include px2rem(width,200px);
  @include px2rem(height,90px);
  @include px2rem(line-height,90px);
  text-align: center;
  @include px2rem(font-size,28px);
  color: #fff;
  background: url('/v1/images/cash_btn.png') no-repeat;
  background-size: cover;

}
.assetsName{
  @include px2rem(padding-left,4px);
  @include px2rem(font-size,26px);
  color: #b3b3b3;
}
.assets_price{
  @include px2rem(margin-top,20px);
  @include px2rem(font-size,68px);
  color: #27313e;
}
.small_font{
  @include px2rem(font-size,24px);
  @include px2rem(margin-top,14px);
}
.box_title{
  position: relative;
  @include px2rem(margin-bottom,60px);
  @include px2rem(padding-left,34px);
  color: #dfe0e1;
  @include px2rem(font-size,36px);
}
.list_box{
  @include px2rem(padding-left,40px);
  @include px2rem(padding-right,30px);
}
.li_box{
  @include px2rem(margin-bottom,60px);
  @include px2rem(font-size,30px);
  color: #27313e;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.li_icon{
  @include px2rem(width,40px);
}
.li_tx{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  @include px2rem(padding-left,20px);
}
.arrow{
  @include px2rem(width,26px);
}
.account_wrapper{
  padding-top: 1.2rem;
}
.navbarli{
  float: left;
  @include px2rem(height,90px);
  @include px2rem(line-height,90px);
  width:25%;
  text-align: center;
  @include px2rem(font-size,30px);
  color: #b3b3b3;
}
.navbar{
  box-shadow: 0 5px 8px 6px #f8f8f8
}
.account_list{
  @include px2rem(padding-left,30px);
  @include px2rem(padding-right,30px);
  @include px2rem(margin-top,45px);
}
.account_li{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  @include px2rem(margin-bottom,50px);
}
.account_time{
  -webkit-box-flex: 0 0 1.306rem;
  -webkit-flex: 0 0 1.3066666667rem;
  -ms-flex: 0 0 1.3066666667rem;
  flex: 0 0 1.3066666667rem;
  @include px2rem(font-size,28px);
  @include px2rem(padding-right,15px);
  text-align: right;
  color: #b3b3b3;
}
.account_time span{
  display: block;
}
.account_logo{
  -webkit-box-flex: 0 0 1.066rem;
  -webkit-flex: 0 0 1.066666667rem;
  -ms-flex: 0 0 1.066666667rem;
  flex: 0 0 1.066666667rem;
  border-radius: .2666666667rem;
  overflow: hidden;
  box-shadow: 0 2px 5px 4px #f8f8f8;
}
.account_tx{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  @include px2rem(font-size,24px);
  @include px2rem(padding-left,18px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  line-height:1.1;
  color: $black;
}
.account_price{
  -webkit-box-flex: 0 0 2.93333rem;
  -webkit-flex: 0 0 2.93333rem;
  -ms-flex: 0 0 2.93333rem;
  flex: 0 0 2.93333rem;
  text-align: right;
  font-weight: 300;
  color: #ff4249;
  font-size: .8rem;
}
.account_price .litter_tx{
  font-size: .4rem;
}
.navbar .active{
  position: relative;
  @include px2rem(font-size,36px);
  color: $black;
}
.navbar .active:after{
  position: absolute;
  content: "";
  @include px2rem(width,40px);
  @include px2rem(height,6px);
  @include px2rem(border-radius,6px);
  box-shadow: 0px 5px 20px 0px rgba(255,88,90,0.5);
  bottom: 14%;
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  overflow: hidden;
  background-image: -webkit-linear-gradient(left, #fe6760, #f5504f);
}
.withdraw-type{
  background: #FFF;
  @include px2rem(padding-top,10px);
  @include px2rem(padding-left,42px);
}
.withdraw-type .recommend{
  @include px2rem(margin-bottom,82px);
}
.withdraw-type .recommend .title{
  @include px2rem(height,56px);
  @include px2rem(line-height,56px);
  @include px2rem(font-size,40px);
  color: #DDDDDD;
  @include px2rem(margin-top,48px);
  @include px2rem(margin-bottom,50px);
  font-weight: 400;
}
.withdraw-type .recommend .type{
  @include px2rem(height,76px);
  @include px2rem(margin-bottom,84px);
  @include px2rem(padding-left,110px);
  line-height:1.6;
}
.withdraw-type .recommend .type img {
  @include px2rem(height,76px);
  @include px2rem(width,76px);
  position: absolute;
  @include px2rem(left,42px);
}
.withdraw-type .recommend .type .desc-content {
  position: relative;
  height: 1.0133333333rem;
  line-height: 1.012rem;
}
.withdraw-type .recommend .type .desc-content .type-name{
  @include px2rem(height,44px);
  @include px2rem(font-size,38px);
  color: #484746;
  display: block;
  @include px2rem(margin-bottom,12px);
  font-weight: 400;
}
.withdraw-type .recommend .type .desc-content .desc{
  display: block;
  @include px2rem(height,36px);
  @include px2rem(font-size,26px);
  color: #B5B5B5;
}
.withdraw-wechat{
  background: #FFF;
  @include px2rem(padding-top,50px);
  @include px2rem(padding-right,60px);
  @include px2rem(padding-bottom,50px);
  @include px2rem(padding-left,60px);
}
.withdraw-wechat .wechat-name {
  @include px2rem(width,500px);
  @include px2rem(padding-bottom,6px);
  border-bottom: 1px solid #ddd;
}
.withdraw-wechat .wechat-name .title {
  @include px2rem(font-size,24px);
  @include px2rem(line-height,34px);
  @include px2rem(height,34px);
  color: #B5B5B5;
  font-weight: 400;
}
.withdraw-wechat .wechat-name label {
  display: block;
  @include px2rem(height,66px);
  height: 33px;
  width: 100%;
}
.withdraw-wechat .wechat-name label input {
  @include px2rem(height,66px);
  width: 100%;
  display: inline-block;
  line-height: normal;
  @include px2rem(font-size,48px);
  color: #3A3A3A;
  padding: 0;
  font-weight: 400;
}
.list {
  position: relative;
  @include px2rem(padding-top,2px);
  @include px2rem(padding-bottom,2px);
  @include px2rem(margin-bottom,40px);
  padding-left: 0;
}
.withdraw-options {
  width: 100%;
  margin: 0 auto;
  @include px2rem(margin-top,40px);
}
.withdraw-options .option {
  @include px2rem(height,88px);
  @include px2rem(width,280px);
  text-align: center;
  color: #3A3A3A;
  font-weight: 600;
  @include px2rem(padding,12px);
  @include px2rem(border-radius,4px);
  border: 1px solid #3A3A3A;
  background: #fff;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: bottom;
  @include px2rem(margin-right,20px);
  @include px2rem(margin-bottom,20px);
}
.withdraw-options .option .title{
  @include px2rem(font-size,26px);
  @include px2rem(line-height,36px);
  font-weight: 200;
}
.withdraw-options .option .lineHeight30{
  line-height: 30px;
}
.withdraw-options .option .desc {
  @include px2rem(font-size,20px);
  @include px2rem(line-height,28px);
}
.withdraw-wechat .tips-content {
  @include px2rem(height,82px);
  @include px2rem(font-size,26px);
  color: #484746;
  font-weight: 400;
}
.withdraw-wechat .button-withdraw {
  @include px2rem(width,344px);
  @include px2rem(height,80px);
  @include px2rem(min-height,80px);
  background: #DDDDDD;
  @include px2rem(border-radius,4px);
  @include px2rem(line-height,80px);
  @include px2rem(font-size,26px);
  color: #FFFFFF;
  display: block;
  margin: 0 auto;
  @include px2rem(margin-top,60px);
  border: 0;
}
.withdraw-options .option.active{
  border: 1px solid #EF502B;
  background: #EF502B;
  color: #fff;
}
.signBtn{
  @include px2rem(width,250px);
  @include px2rem(height,60px);
  @include px2rem(line-height,60px);
  text-align: center;
  color:rgba(255,255,255,1);
  font-weight: 600;
  margin: 0 auto;
  @include px2rem(margin-top,40px);
  @include px2rem(font-size,24px);
  background:linear-gradient(142deg,rgba(250,128,126,1) 0%,rgba(243,73,72,1) 100%);
  @include px2rem(border-radius,25px);
}
.signedBG{
  background: #ccc;
}
input[type=text]{
  vertical-align: middle;
  border: 0;
  pointer-events: auto;
}
.withdraw-wechat .button-active{
  background: #ef502b;
}
.successRewardPopInner{
  width: 84%;
  margin: 0 auto;
  background: #fff;
  padding-top: .8rem;
  padding-bottom: .4rem;
}
.popInner_title{
  color: #27313e;
  font-size: .6rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: .6rem;
}
#serverBox .pop_content{
  color: #27313e;
  text-align: center;
  line-height: 1.8;
  padding: 0;
  font-size: .4rem;
  height: 4rem;
  position: relative;
}
.pop_content .link-copy-area{
  top: .8rem;
}
.popCloseServer{
  width: 1.2rem;
  position: absolute;
  top: -.5rem;
  right: -.5rem;
}
.cash_tip{
  line-height: 1.6;
  font-size: .32rem;
  color: #484746;
}
.cash_tip ul{
  margin-top: .4rem;
}
.ab_box{
  background: #FFFFFF;
  text-align: center;
}
.ab_logo{
  @include px2rem(width,120px);
  @include px2rem(height,120px);
  margin: 0 auto;
  overflow: hidden;
  @include px2rem(border-radius,20px);
  @include px2rem(margin-top,120px);
  @include px2rem(margin-bottom,30px);
}
.ab_title{
  @include px2rem(height,34px);
  @include px2rem(line-height,34px);
  @include px2rem(font-size,24px);
  color: #b5b5b5;
  @include px2rem(margin-bottom,8px);
  font-weight: 400;
}
.ab_content img {
  @include px2rem(width,30px);
  @include px2rem(height,30px);
  vertical-align: middle;
  @include px2rem(margin-left,12px);
}
.ag_content{
  @include px2rem(padding-left,40px);
  @include px2rem(padding-right,40px);
  text-align: justify;
  background-color: #fff;
}
.ag_content h5 {
  @include px2rem(font-size,28px);
  color: #484746;
  @include px2rem(line-height,40px);
  margin-top: 0;
  @include px2rem(margin-bottom,20px);
  font-weight: 400;
}
.ag_content p{
  @include px2rem(font-size,26px);
  color: #888;
  @include px2rem(line-height,44px);
  @include px2rem(margin-bottom,60px);
  @include px2rem(letter-spacing,2px);
}
.mult-link-copy{
  width:85%;
  margin: 0 auto;
  @include px2rem(margin-top,20px);
}
.mult-link-copy .link-copy-area{
  top: 0.2rem;
}
.mult-link-copy-top{
  margin-top: .5rem;
}
.box_title{
  position: relative;
  @include px2rem(margin-bottom,20px);
  color: #dfe0e1;
  @include px2rem(font-size,42px);
}
.mian_block{
  margin-top: 1.2rem;
  padding-left: .24rem;
  padding-right: .24rem;
  padding-top: .4rem;
  padding-bottom: .4rem;
}
.problemTitle{
  line-height: 1rem;
  color: #51B7F1;
  font-size: 0.4rem;
  padding: 0 0.1rem;
}
.problemTxt{
  padding: 0.1rem 0.15rem 0.4rem 0.15rem;
  @include px2rem(font-size,24px);
  line-height: 1.8;
  color: #777;
}
